<template>
	<div class="system-user-container">
		<el-dialog title="密码重置" v-model="isShowDialog" >
			<el-steps :active="stepsActive" class="mb20">
				<el-step title="密码验证">
					<template #icon>
						<SvgIcon name="iconfont icon-1_round_solid" :size="20" />
					</template>
				</el-step>
				<el-step title="密码重置">
					<template #icon>
						<SvgIcon name="iconfont icon-2_round_solid" :size="20" />
					</template>
				</el-step>
				<el-step title="重置成功">
					<template #icon>
						<SvgIcon name="iconfont icon-3_round_solid" :size="20" />
					</template>
				</el-step>
			</el-steps>

			<el-form ref="pwdverifyFormRef" :model="formData" :rules="formRules" label-width="80px" v-if="stepsActive === 1">
				<el-row :gutter="35">
					<el-col>
						<el-form-item label="登录密码" prop="password">
							<el-input type="password" v-model="formData.password" placeholder="请输入当前登录用户密码" class="w100" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			
			<el-form ref="resetPwdFormRef" :model="formData" :rules="formRules" label-width="80px" v-if="stepsActive === 2">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="登录账号" prop="loginName">
							<el-input v-model="formData.loginName" placeholder="请输入登录账号" readonly clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="用户名称" prop="userName">
							<el-input v-model="formData.userName" placeholder="请输入用户名称" readonly clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="登录密码" prop="password">
							<el-input type="password" v-model="formData.password" placeholder="请输入登录密码" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="确认密码" prop="confirmPassword">
							<el-input type="password" v-model="formData.confirmPassword" placeholder="请输入确认密码" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<el-result icon="success" title="重置成功" :subTitle="'密码重置成功' + countDown + '秒后自动关闭'" v-if="stepsActive === 3"> </el-result>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onNextSteps" v-if="stepsActive === 1">下一步</el-button>
					<el-button type="primary" @click="onSubmit" v-if="stepsActive === 2">重 置</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { resetPwd } from '/@/api/system/user/index';
import { pwdVerify } from '/@/api/login/index';
import { verifyPassword } from '/@/utils/toolsValidate';
import { Local } from '/@/utils/storage';
import { SM } from '/@/utils/sm';
export default {
	name: 'user/resetPwd',
	setup() {
		const resetPwdFormRef = ref();
		const pwdverifyFormRef = ref();
		const validPassword = (rule, value, callback) => {
			if(!value){
				return callback(new Error('登录密码不能为空'));
			}
			if(!verifyPassword(value)){
				return callback(new Error('只允许字母数字和 !@#$%^&.*_ 组成6~16个字符'));
			}
			callback();
		}
		const validConfirmPassword = (rule, value, callback) => {
			if(!value){
				return callback(new Error('确认密码不能为空'));
			}
			if(state.formData.password != value){
				return callback(new Error('确认密码和登录密码不一致'));
			}
			callback();
		}
		const state = reactive({
			isShowDialog: false,
			stepsActive: 1,
			countDown: 5,
			verifyToken: '',
			formData: {
				password: '',
				confirmPassword: '',
			},
			formRules : {
				password: { required: true, validator: validPassword, trigger: 'blur' },
				confirmPassword: { required: true, validator: validConfirmPassword, trigger: 'blur' }
			}
		});

		// 打开弹窗
		const openDialog = (row?: object) => {
			state.isShowDialog = true;
			if(row){
				state.formData = Object.assign({}, row);
			}
		};
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
			state.stepsActive = 1;
			state.countDown = 5;
			for(var key in state.formData) {
				state.formData[key] = undefined;
			}
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 下一步点击
		const onNextSteps = () => {
			pwdverifyFormRef.value.validate(valid => {
				if(valid){
					const publickey = Local.get('publicKey');
					let password = SM.sm2Encrypt(state.formData.password, publickey);
					pwdVerify({password : password}).then((res) => {
						if(res.code === 0){
							state.formData.password = undefined;
							state.verifyToken = res.data;
							state.stepsActive = 2;
							ElMessage.success('密码验证通过');
						}else{
							ElMessage.error('密码验证不通过');
						}
					});
				}
			});
		};
		// 确定重置
		const onSubmit = () => {
			resetPwdFormRef.value.validate(valid => {
				if(valid){
					const publickey = Local.get('publicKey');
					let password = SM.sm2Encrypt(state.formData.password, publickey);

					let params = {
						id: state.formData.id,
						loginName: state.formData.loginName,
						password: password,
					}
					resetPwd(state.verifyToken, params).then((res) => {
						if(res.code === 0){
							state.stepsActive = 3;
							const t = setInterval(() => {
								state.countDown--;
							}, 1000);
							setTimeout(() => {
								clearInterval(t);
								closeDialog();
							}, 5000);
						}
					});
				}
			});
		};
		
		return {
			pwdverifyFormRef,
			resetPwdFormRef,
			onNextSteps,
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>